<template>
	<div class="admin">
		<el-row class="table-grid-content">
			<el-col :span="18" class="grid">
				<el-input v-model="input" placeholder="请输入搜索内容"></el-input>
			</el-col>
			<el-col :span="3" class="grid" :gutter="1">
				<el-button type="success" icon="el-icon-search">搜索</el-button>
			</el-col>
			<el-col :span="2" class="grid" :gutter="15">
				<el-button type="primary" @click="addMembers()">增加</el-button>
			</el-col>
		</el-row>

		<el-table :data="tables" :stripe="true" :border="true" width="100%">
			<el-table-column label="工号" prop="date"></el-table-column>
			<el-table-column label="姓名" prop="name"></el-table-column>
			<el-table-column label="登录密码" prop="address"></el-table-column>
			<el-table-column label="操作">
				<template slot-scope="scope">
					<el-button type="primary" @click="modifyData(scope.$index, scope.row)">修改</el-button>
					<el-button type="danger" @click="deleteData(scope.$index,tableData)">删除</el-button>
				</template>
			</el-table-column>
		</el-table>
		<el-dialog :visible.sync="centerDialogVisible">
			<el-form :model="editForm">
				<el-form-item label="工号">
					<el-input v-model="editForm.date"></el-input>
				</el-form-item>
				<el-form-item label="姓名">
					<el-input v-model="editForm.name"></el-input>
				</el-form-item>
				<el-form-item label="登录密码">
					<el-input v-model="editForm.address"></el-input>
				</el-form-item>
			</el-form>
			<div>
				<el-button @click="closeDialog()">取消</el-button>
				<el-button type="primary" @click="sumbitEditRow()">确定</el-button>
			</div>
		</el-dialog>
		<el-dialog :visible.sync="isAddMembers">
			<el-form :model="addForm">
				<el-form-item label="工号">
					<el-input v-model="addForm.date"></el-input>
				</el-form-item>
				<el-form-item label="姓名">
					<el-input v-model="addForm.name"></el-input>
				</el-form-item>
				<el-form-item label="登录密码">
					<el-input v-model="addForm.address"></el-input>
				</el-form-item>
			</el-form>
			<div>
				<el-button @click="closeDialog()">取消</el-button>
				<el-button type="primary" @click="sumbitAddRow()">确定</el-button>
			</div>
		</el-dialog>

	</div>
</template>

<script>
	// import { musicBroadcastingDetails } from '@/api/index.js'
	import axios from 'axios'
	var _index;
	export default {
		name: 'HelloWorld',
		data() {
			return {
				msg: 'Welcome to Your Vue.js App',
				centerDialogVisible: false,
				isAddMembers: false,
				editForm: [],
				addForm: [],
				searchData: '',
				input: '',
				id:'',
				pickerOptions: {
					disabledDate(time) {
						return time.getTime() > Date.now();
					}
				},
				tableData: [{
						date: '001',
						name: '汪云飞',
						address: '1001'
					}, {
						date: '002',
						name: '刘顺',
						address: '1002'
					}, {
						date: '003',
						name: '吴志鑫',
						address: '1003'
					}, {
						date: '004',
						name: '高刘成',
						address: '1004'
					},{
						date: '005',
						name: '江河',
						address: '1005'
					},{
						date: '006',
						name: '韩宇航',
						address: '1006'
					},{
						date: '007',
						name: '李亚辉',
						address: '1007'
					},{
						date: '008',
						name: '温曼珂',
						address: '1003'
					},
				]
			}
		},
		methods: {
			deleteData(index, row) {
         this.$confirm("此操作将永久删除该记录, 是否继续?", "提示", {
        confirmButtonText: "确定",

        cancelButtonText: "取消",

        type: "warning"
      })

        .then(() => {
          this.$message({
            type: "success",

            message: "删除成功!"
          });

          row.splice(index, 1);
        console.log("进行了删除操作")
				console.log("index的值是：" + index)
        console.log("row的值是：", row)
        })

        .catch(() => {
          this.$message({
            type: "info",

            message: "已取消删除"
          });
          console.log("已取消删除操作")
        });



			},
			modifyData(index, row) {
				this.centerDialogVisible = true
				this.editForm = Object.assign({}, row); //重置对象
				_index = index;
				console.log("index的值：" + index)
				console.log("_index的值：" + _index)
				console.log("row的值是：", this.editForm) //代表选择的这一行的数据
			},
			sumbitEditRow() {
				var editData = _index;
				console.log("editData的值" + this.editForm)
				this.tableData[editData].name = this.editForm.name;
				this.tableData[editData].date = this.editForm.date;
				this.tableData[editData].address = this.editForm.address;
				this.centerDialogVisible = false;
				console.log("数据：" + this.editForm.date)
				console.log("对象数组", this.tableData)
			},
			closeDialog() {
				this.centerDialogVisible = false
				this.isAddMembers = false
				console.log("editfrom", this.editForm)
				console.log("addfrom", this.addForm)

			},
			addMembers() {
				this.isAddMembers = true
				this.addForm = {
					name: '',
					date: '',
					address: ''
				}
			},
			sumbitAddRow() {
				this.tableData = this.tableData || []
				console.log("表格是:" + this.tableData)
				this.tableData.push({
					name: this.addForm.name,
					date: this.addForm.date,
					address: this.addForm.address
				})
				this.isAddMembers = false;
				console.log("新增的日期：" + this.addForm.date)
			}
		},
		computed: {
			tables() {
				const input = this.input
				if (input) {
					console.log("input输入的搜索内容：" + this.input)
					return this.tableData.filter(data => {
						console.log("object:" + Object.keys(data))
						return Object.keys(data).some(key => {
							return String(data[key]).toLowerCase().indexOf(input) > -1
						})
					})
				}
				return this.tableData
			}
		}
	}
</script>
